import { Card, Button, Input, Space } from 'antd';
import React, { useState, useEffect } from 'react';
import { gettag, tag_del, tag_add } from '@/api/article'
import styles from './index.less'
export default function IndexPage() {
  const [tag, setTag] = useState([])
  const [flag, setFlag] = useState(false);
  const [str, setStr]: any = useState({});
  const [label, setLabel]: any = useState('');
  const [value, setValue]: any = useState('');
  useEffect(() => {
    gettag().then(({ data }) => {

      setTag(data)
    })
  }, [])

  // 点击右侧按钮
  const obtain = (item: any) => {
    // console.log(item);
    setStr(item);
    setFlag(true);
  };
  // 返回添加
  const backAdd = () => {
    setFlag(false);
    setStr({});
  };
  // 删除
  const del_category = () => {
    tag_del(str.id).then(() => {
      gettag().then(({ data }) => {

      setTag(data)
    })
    });

    setFlag(false);
    setStr({});
  };
  // 添加
  const add_category = () => {
      setLabel('');
      setValue('');
    const obj = { label, value }
    tag_add({ ...obj }).then(() => {

      gettag().then(({ data }) => {

        setTag(data)
      })
    });

  };

  return (
    <div className={styles.main}>

      <div className={styles.left}>
        <Card title={flag?'管理标签':'"添加标签"'}>

          <div className={styles.Class_input}>
            <Input
              placeholder='输入标签名称'
              value={str.label}
              onChange={(e) => setLabel(e.target.value)}
            />
            <Input
              placeholder='输入标签值(请输入英文，作为路由使用)'
              value={str.value}
              onChange={(e) => setValue(e.target.value)}
            />
            <div className={styles.Class_btns}>
              <Button type="primary" onClick={add_category}>
                保存
              </Button>
              <div
                className={
                  flag ? styles.Class_btns_show : styles.Class_btns_shows
                }
              >
                <Button type="dashed" onClick={() => backAdd()}>
                  返回添加
                </Button>
                <Button danger onClick={del_category}>
                  删除
                </Button>
              </div>
            </div>
          </div>

        </Card>
      </div>
      <div className={styles.right}>
        <Card title="所有标签">
          <Space wrap>
            {
              tag.length > 0 ? tag.map((item: any) => {
                return <Button key={item.id} onClick={() => obtain(item)}>{item.label}</Button>
              }) : ''
            }
          </Space>
        </Card>
      </div>


    </div>
  );
}
